<template>
    <div class="svgWrapper noselect" ref="svgclip">
        <svg id="图层_1"
             ref="svg"
             data-name="图层 1"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="-100 -100 3439 2800"
             @click="handleChick($event)"
             @mouseover = "handleMouseover($event)">
            <defs>
                <symbol id="_1" data-name="1" viewBox="0 0 40.97 44.68">
                    <circle class="cls-1" cx="21.48" cy="21.34" r="12"/>
                    <line class="cls-1" x1="39.48" y1="1.34" x2="1.48" y2="43.34"/>
                </symbol>
                <symbol id="_2" data-name="2" viewBox="0 0 98 58">
                    <path class="cls-1" d="M12,4a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-4A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z"/>
                    <path class="cls-1" d="M86,4a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-4A12,12,0,1,0,98,12,12,12,0,0,0,86,0Z"/>
                    <path class="cls-1" d="M48,38a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-4A12,12,0,1,0,60,46,12,12,0,0,0,48,34Z"/>
                    <line class="cls-1" x1="24" y1="12" x2="40.5" y2="12"/>
                    <line class="cls-1" x1="74" y1="12" x2="56.5" y2="12"/>
                    <line class="cls-1" x1="78.3" y1="20.5" x2="56" y2="39"/>
                </symbol>
                <symbol id="_3" data-name="3" viewBox="0 0 98 64">
                    <path class="cls-1" d="M12,4a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-4A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z"/>
                    <path class="cls-1" d="M86,4a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-4A12,12,0,1,0,98,12,12,12,0,0,0,86,0Z"/>
                    <path class="cls-1" d="M49,44a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-4A12,12,0,1,0,61,52,12,12,0,0,0,49,40Z"/>
                    <line class="cls-1" x1="24" y1="12" x2="74" y2="12"/>
                    <line class="cls-1" x1="79.6" y1="21" x2="72" y2="28"/>
                    <line class="cls-1" x1="56" y1="45" x2="64" y2="38"/>
                </symbol>
                <symbol id="_4" data-name="4" viewBox="0 0 98 59.2">
                    <path class="cls-1" d="M12,4a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-4A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z"/>
                    <path class="cls-1" d="M86,4a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-4A12,12,0,1,0,98,12,12,12,0,0,0,86,0Z"/>
                    <path class="cls-1" d="M51.9,39.2a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-4a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z"/>
                    <line class="cls-1" x1="24" y1="12" x2="40.5" y2="12"/>
                    <line class="cls-1" x1="74" y1="12" x2="56.5" y2="12"/>
                    <path class="cls-1" d="M76.4,43.7"/>
                    <line class="cls-1" x1="20.9" y1="19.2" x2="42.9" y2="40.2"/>
                </symbol>
            </defs>
            <ellipse class="cls-2" cx="975.47" cy="449.6" rx="31.1" ry="30.5"/>
            <circle class="cls-2" cx="1166.87" cy="1748.1" r="30.5"/>
            <circle class="cls-2" cx="2165.37" cy="875.6" r="27"/>
            <text class="cls-3" transform="translate(2155.98 883.5)">H</text>
            <circle class="cls-2" cx="2188.37" cy="1467.6" r="27"/>
            <text class="cls-3" transform="translate(2178.24 1476.28)">U</text>
            <use width="40.97" height="44.68" transform="translate(1487.89 190.26)" xlink:href="#_1"/>
            <use width="98" height="58" transform="translate(2107.37 200.6)" xlink:href="#_2"/>
            <use width="98" height="64" transform="translate(1176.37 353.6)" xlink:href="#_3"/>
            <line class="cls-2" x1="2981.87" y1="365" x2="3102.47" y2="365"/>
            <line id="_0417" data-name="0417" class="cls-2" x1="2747.37" y1="365" x2="2958.97" y2="365"/>
            <line id="_0416" data-name="0416" class="cls-2" x1="2399.37" y1="365" x2="2654.37" y2="365"/>
            <line class="cls-2" x1="1831.37" y1="365" x2="2378.97" y2="365"/>
            <line id="_0406" data-name="0406" class="cls-2" x1="1514.97" y1="365" x2="1812.97" y2="365"/>
            <line id="_0502" data-name="0502" class="cls-2" x1="1267.07" y1="365" x2="1506.37" y2="365"/>
            <polyline id="_0514" class="cls-2" points="975.5,419.1 1065.6,365 1174.4,365 "/>
            <line id="_0420" data-name="0420" class="cls-2" x1="1821.37" y1="680.1" x2="2105.37" y2="680.1"/>
            <line id="_0408" data-name="0408" class="cls-2" x1="1520.37" y1="680.1" x2="1817.37" y2="680.1"/>
            <polyline id="_0505" data-name="0505" class="cls-2" points="975.47 480.1 975.47 680.1 1500.37 680.1"/>
            <line id="_0419" data-name="0419" class="cls-2" x1="2750.47" y1="530.3" x2="2960.37" y2="530.3"/>
            <line id="_0418" data-name="0418" class="cls-2" x1="2399.37" y1="530.3" x2="2656.37" y2="530.3"/>
            <line class="cls-2" x1="1833.97" y1="530.3" x2="2380.37" y2="530.3"/>
            <line id="_0407" data-name="0407" class="cls-2" x1="1518.47" y1="530.3" x2="1813.57" y2="530.3"/>
            <line id="_0504" data-name="0504" class="cls-2" x1="1269.47" y1="530.3" x2="1500.37" y2="530.3"/>
            <polyline id="_0503" class="cls-2" points="973.4,480.1 1059.1,530.3 1177.4,530.3 "/>
            <line id="_0415" data-name="0415" class="cls-2" x1="1817.37" y1="212.1" x2="2107.37" y2="212.1"/>
            <line id="_0405" data-name="0405" class="cls-2" x1="1514.37" y1="212.1" x2="1810.87" y2="212.1"/>
            <polyline id="_0513" data-name="0513" class="cls-2" points="975.47 419.1 975.47 212.1 1501.47 212.1"/>
            <use width="40.97" height="44.68" transform="translate(1794.14 193.34)" xlink:href="#_1"/>
            <use width="98" height="59.2" transform="translate(2130.09 1737.49)" xlink:href="#_4"/>
            <use width="40.97" height="44.68" transform="translate(1486.14 339.47)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(1485.14 507.83)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(1486.14 656.83)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(1793.23 856.79)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(2662.28 857.79) scale(1.05 1)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(1800.23 661.79)" xlink:href="#_1"/>
            <use width="98" height="64" transform="translate(1178.37 517.6)" xlink:href="#_3"/>
            <use width="98" height="64" transform="matrix(-1, 0, 0, 1, 2750.37, 351.6)" xlink:href="#_3"/>
            <use width="40.97" height="44.68" transform="translate(2367.78 344.02)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(2365.78 508.02)" xlink:href="#_1"/>
            <use width="98" height="64" transform="matrix(-1, 0, 0, 1, 2754.37, 519.6)" xlink:href="#_3"/>
            <use width="40.97" height="44.68" transform="translate(2948.39 343.66)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(2948.39 508.94)" xlink:href="#_1"/>
            <use width="98" height="58" transform="translate(1187.37 864.6)" xlink:href="#_2"/>
            <use width="40.97" height="44.68" transform="translate(1480.12 857.11)" xlink:href="#_1"/>
            <line id="_0506" data-name="0506" class="cls-2" x1="1282.37" y1="878.6" x2="1489.37" y2="878.6"/>
            <line id="_0409" data-name="0409" class="cls-2" x1="1506.37" y1="878.6" x2="1804.37" y2="878.6"/>
            <line id="_0422" data-name="0422" class="cls-2" x1="1827.37" y1="878.6" x2="2137.37" y2="878.6"/>
            <line id="_0423" data-name="0423" class="cls-2" x1="2196.37" y1="877.6" x2="2672.37" y2="877.6"/>
            <line class="cls-2" x1="3117.77" y1="879" x2="2694.37" y2="878.8"/>
            <use width="40.97" height="44.68" transform="translate(1786.97 1444.94)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(2648.97 1445.94)" xlink:href="#_1"/>
            <use width="98" height="58" transform="translate(1223.11 1454.75)" xlink:href="#_2"/>
            <use width="40.97" height="44.68" transform="translate(1477.86 1445.26)" xlink:href="#_1"/>
            <line id="_0510" data-name="0510" class="cls-2" x1="1320.07" y1="1466.7" x2="1487.07" y2="1466.7"/>
            <line id="_0412" data-name="0412" class="cls-2" x1="1511.07" y1="1466.7" x2="1796.37" y2="1466.7"/>
            <line id="_0428" data-name="0428" class="cls-2" x1="1820.37" y1="1466.7" x2="2161.07" y2="1466.7"/>
            <line id="_0429" data-name="0429" class="cls-2" x1="2213.43" y1="1465.7" x2="2658.37" y2="1465.7"/>
            <polyline class="cls-2" points="2676.37 1466.7 3001.97 1466.7 3129.07 1466.8"/>
            <polygon
                points="3105.37 1479.5 3104.07 1475.8 3128.67 1466.8 3104.07 1457.8 3105.47 1454.1 3140.37 1466.8 3105.37 1479.5"/>
            <line class="cls-2" x1="1139.57" y1="1748.1" x2="974.27" y2="1748.1"/>
            <polygon
                points="997.97 1735.4 999.37 1739.1 974.67 1748.1 999.37 1757.1 997.97 1760.8 962.97 1748.1 997.97 1735.4"/>
            <line id="_0511" data-name="0511" class="cls-2" x1="1196.47" y1="1748.1" x2="1486.37" y2="1748.1"/>
            <line id="_0413" data-name="0413" class="cls-2" x1="1509.17" y1="1749.5" x2="1808.37" y2="1749.5"/>
            <line id="_0430" data-name="0430" class="cls-2" x1="1828.77" y1="1748.6" x2="2131.37" y2="1748.6"/>
            <use width="40.97" height="44.68" transform="translate(1475.48 1728.15)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(1796.23 1727.28)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(2643.31 1727.96)" xlink:href="#_1"/>
            <line id="_路径_" data-name="&lt;路径&gt;" class="cls-2" x1="2228.09" y1="1749.4" x2="2656.37" y2="1749.6"/>
            <line class="cls-2" x1="2672.37" y1="1750.6" x2="3113.97" y2="1750.6"/>
            <circle class="cls-2" cx="1164.27" cy="2024.8" r="30.5"/>
            <use width="98" height="59.2" transform="translate(2127.52 2014.21)" xlink:href="#_4"/>
            <line class="cls-2" x1="1137.37" y1="2024.8" x2="961.67" y2="2024.8"/>
            <polygon
                points="985.27 2012.1 986.67 2015.9 962.07 2024.8 986.67 2033.8 985.27 2037.5 950.37 2024.8 985.27 2012.1"/>
            <line class="cls-2" x1="1194.67" y1="2024.8" x2="1484.57" y2="2024.8"/>
            <use width="40.97" height="44.68" transform="translate(1472.91 2004.88)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(1793.65 2004)" xlink:href="#_1"/>
            <line id="_0414" data-name="0414" class="cls-2" x1="1506.37" y1="2026.2" x2="1805.57" y2="2026.2"/>
            <line id="_0501" data-name="0501" class="cls-2" x1="1826.37" y1="2025.3" x2="2128.97" y2="2025.3"/>
            <line id="_路径_2" data-name="&lt;路径&gt;" class="cls-2" x1="2215.48" y1="2026.2" x2="2646.57" y2="2026.2"/>
            <line class="cls-2" x1="2666.37" y1="2027.3" x2="3111.87" y2="2027.3"/>
            <circle class="cls-2" cx="1158.27" cy="1173.2" r="30.5"/>
            <line class="cls-2" x1="1127.37" y1="1173.2" x2="962.67" y2="1173.2"/>
            <polygon
                points="986.27 1160.5 987.67 1164.2 963.07 1173.2 987.67 1182.1 986.27 1185.9 951.37 1173.2 986.27 1160.5"/>
            <use width="40.97" height="44.68" transform="translate(2635.74 2004.68)" xlink:href="#_1"/>
            <use width="98" height="58" transform="translate(1358.37 1159.6)" xlink:href="#_2"/>
            <use width="40.97" height="44.68" transform="translate(1631.31 1150.09)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(2169.68 1149.73)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(2371.31 1151.09)" xlink:href="#_1"/>
            <use width="98" height="64" transform="translate(2629.37 1159.6)" xlink:href="#_3"/>
            <use width="40.97" height="44.68" transform="translate(2938.31 1150.22)" xlink:href="#_1"/>
            <line id="_0507" data-name="0507" class="cls-2" x1="1188.37" y1="1173.2" x2="1359.37" y2="1173.2"/>
            <line class="cls-2" x1="2967.37" y1="1171.6" x2="3140.07" y2="1171.6"/>
            <polygon
                points="3116.47 1184.3 3115.07 1180.6 3139.67 1171.6 3115.07 1162.6 3116.47 1158.9 3151.37 1171.6 3116.47 1184.3"/>
            <line id="_0426" data-name="0426" class="cls-2" x1="2723.37" y1="1171.6" x2="2947.37" y2="1171.6"/>
            <line id="_0425" data-name="0425" class="cls-2" x1="2399.37" y1="1171.6" x2="2629.37" y2="1171.6"/>
            <line id="_0424" data-name="0424" class="cls-2" x1="2199.37" y1="1171.6" x2="2386.37" y2="1171.6"/>
            <line id="_0410" data-name="0410" class="cls-2" x1="1662.37" y1="1171.6" x2="2187.37" y2="1171.6"/>
            <line id="_0508" data-name="0508" class="cls-2" x1="1452.37" y1="1171.6" x2="1643.37" y2="1171.6"/>
            <line id="_0427" data-name="0427" class="cls-2" x1="1821.37" y1="1317.6" x2="2042.37" y2="1317.6"/>
            <line id="_0411" data-name="0411" class="cls-2" x1="1521.37" y1="1318.6" x2="1801.37" y2="1318.6"/>
            <polyline id="_0509" class="cls-2" points="1191.2,1174.1 1295.8,1318.6 1498.4,1318.6 "/>
            <use width="98" height="58" transform="translate(381.37 1447.6)" xlink:href="#_2"/>
            <use width="98" height="58" transform="translate(372.37 1586.6)" xlink:href="#_2"/>
            <use width="40.97" height="44.68" transform="translate(240.16 1437.13) scale(1.1 1.15)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(571.16 1437.9)" xlink:href="#_1"/>
            <line class="cls-2" x1="251.37" y1="1459.6" x2="132.67" y2="1459.6"/>
            <polygon
                points="156.27 1446.9 157.67 1450.6 133.07 1459.6 157.67 1468.6 156.27 1472.3 121.37 1459.6 156.27 1446.9"/>
            <line class="cls-2" x1="381.37" y1="1459.6" x2="264.37" y2="1459.6"/>
            <line class="cls-2" x1="479.37" y1="1459.6" x2="589.37" y2="1459.6"/>
            <polyline class="cls-2" points="372.37 1598.6 263.37 1598.6 263.37 1469.5"/>
            <polyline class="cls-2" points="467.37 1597.6 591.37 1597.6 591.37 1469.6"/>
            <use width="98" height="58" transform="translate(2040.37 1304.6)" xlink:href="#_2"/>
            <use width="40.97" height="44.68" transform="translate(1485.16 1297.41)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(1788.16 1295.41)" xlink:href="#_1"/>
            <polyline class="cls-2" points="2138.37 1316.6 2191.37 1316.6 2191.37 1179.6"/>
            <line class="cls-2" x1="2977.37" y1="530.3" x2="3121.07" y2="530.3"/>
            <polygon
                points="3097.47 543 3096.07 539.2 3120.67 530.3 3096.07 521.3 3097.47 517.6 3132.37 530.3 3097.47 543"/>
            <polyline class="cls-2" points="3143.37 854.6 3118.27 878.1 3141.27 899.6"/>
            <polyline class="cls-2" points="3128.37 343.3 3099.87 366.8 3125.97 388.3"/>
            <polyline class="cls-2" points="3139.37 1727.3 3114.77 1750.8 3137.27 1772.3"/>
            <polyline class="cls-2" points="3137.37 2004.3 3112.27 2027.8 3135.27 2049.3"/>
            <line class="cls-2" x1="594.37" y1="1459" x2="717.07" y2="1459"/>
            <polyline class="cls-2" points="748.37 1435.3 719.37 1458.8 745.87 1480.3"/>
            <line class="cls-2" x1="1188.87" y1="878.6" x2="982.37" y2="878.6"/>
            <polyline class="cls-2" points="957.37 902.3 982.77 878.8 959.57 857.3"/>
            <polyline class="cls-2" points="964.77 1029.3 988.27 1005.8 966.77 984.3"/>
            <line class="cls-2" x1="1226.37" y1="1467.6" x2="975.37" y2="1467.6"/>
            <polyline class="cls-2" points="961.77 1489.3 985.27 1465.8 963.77 1444.3"/>
            <polyline class="cls-2" points="967.77 1620.3 991.27 1596.8 969.77 1575.3"/>
            <polyline id="_路径_3" data-name="&lt;路径&gt;" class="cls-2"
                      points="1236.37 924.6 1236.37 1005.6 987.97 1005.6"/>
            <polyline id="_0514-2" data-name="0514" class="cls-2" points="1271.07 1512.7 1271.07 1597.6 991.37 1597.6"/>
            <text class="cls-4" transform="translate(859.99 459.9)">J
                <tspan class="cls-5" x="18" y="0">T</tspan>
                <tspan x="37.32" y="0">AJ</tspan>
            </text>
            <text class="cls-4" transform="translate(849.56 880.73)">KZ24</text>
            <text class="cls-4" transform="translate(847.52 1023.71)">KZ-CS</text>
            <text class="cls-4" transform="translate(1170.46 325.09)">J
                <tspan class="cls-5" x="18" y="0">T</tspan>
                <tspan x="37.32" y="0">AJ</tspan>
            </text>
            <text class="cls-4" transform="translate(1174.54 484.41)">J
                <tspan class="cls-5" x="18" y="0">T</tspan>
                <tspan x="37.32" y="0">AJ</tspan>
            </text>
            <text class="cls-4" transform="translate(1198.84 831.71)">J
                <tspan class="cls-5" x="18" y="0">T</tspan>
                <tspan x="37.32" y="0">AJ</tspan>
            </text>
            <text class="cls-4" transform="translate(861.82 1185.07)">KF24</text>
            <text class="cls-4" transform="translate(860.82 1488.81)">KZ24</text>
            <text class="cls-4" transform="translate(864.9 1609.32)">KZ-CS</text>
            <text class="cls-4" transform="translate(861.82 1755.49)">KFZ4</text>
            <text class="cls-4" transform="translate(865.99 2040.39)">KF24</text>
            <text class="cls-4" transform="translate(1129.39 1966.24)">ZCAJ</text>
            <text class="cls-4" transform="translate(1125.48 1693.22)">CSAJ</text>
            <text class="cls-4" transform="translate(1229.35 1435.24)">KCAJ</text>
            <text class="cls-4" transform="translate(1365.5 1137.54)">KCAJ</text>
            <text class="cls-4" transform="translate(2044.48 1279.81)">KCAJ</text>
            <text class="cls-4" transform="translate(2141.92 1420.2)">KCD</text>
            <text class="cls-4" transform="translate(2139.33 1710.3)">CS
                <tspan class="cls-6" x="50.01" y="0">A</tspan>
            </text>
            <text class="cls-4" transform="translate(2138.37 2001.2)">ZC
                <tspan class="cls-6" x="47.99" y="0">A</tspan>
            </text>
            <text class="cls-4" transform="translate(2622.33 1139.96)">KCZZ
                <tspan class="cls-6" x="93.99" y="0">A</tspan>
            </text>
            <text class="cls-4" transform="translate(2124.16 823.54)">JTD</text>
            <use width="98" height="58" transform="translate(2105.37 668.6)" xlink:href="#_2"/>
            <text class="cls-4" transform="translate(2104.56 654.96)">JTH
                <tspan class="cls-6" x="65.99" y="0">FA</tspan>
            </text>
            <text class="cls-4" transform="translate(2098.56 187.11)">JTH
                <tspan class="cls-6" x="65.99" y="0">FA</tspan>
            </text>
            <text class="cls-4" transform="translate(2670.92 328.17)">J
                <tspan class="cls-5" x="18" y="0">T</tspan>
                <tspan class="cls-6" x="37.32" y="0">A</tspan>
            </text>
            <text class="cls-4" transform="translate(2676.12 499.6)">J
                <tspan class="cls-5" x="18" y="0">T</tspan>
                <tspan class="cls-6" x="37.32" y="0">A</tspan>
            </text>
            <text class="cls-4" transform="translate(379.46 1423.32)">CSAJ</text>
            <text class="cls-4" transform="translate(377.46 1574.85)">CSAJ</text>
            <text class="cls-4" transform="translate(3069.22 429.77)">KZ24</text>
            <text class="cls-4" transform="translate(3065.14 593.32)">KF24</text>
            <text class="cls-4" transform="translate(3051.88 929.45)">KZ24</text>
            <text class="cls-4" transform="translate(3065.33 1137.77) scale(1.12 1)">KF24</text>
            <text class="cls-4" transform="translate(3067.67 1519.39)">KF24</text>
            <text class="cls-4" transform="translate(3077.54 2090.22)">KZ24</text>
            <text class="cls-4" transform="translate(3077.63 1811.98)">KZ24</text>
            <line class="cls-2" x1="1038.37" y1="481.6" x2="1038.37" y2="447.4"/>
            <polygon points="1046.47 453 1038.37 422.6 1030.27 453 1046.47 453"/>
            <line class="cls-2" x1="1175.37" y1="603.6" x2="1175.37" y2="569.4"/>
            <polygon points="1183.47 575 1175.37 544.6 1167.27 575 1183.47 575"/>
            <line class="cls-2" x1="1166.37" y1="436.6" x2="1166.37" y2="402.4"/>
            <polygon points="1174.47 408 1166.37 377.6 1158.27 408 1174.47 408"/>
            <line class="cls-2" x1="1181.37" y1="954.6" x2="1181.37" y2="920.4"/>
            <polygon points="1189.47 926 1181.37 895.6 1173.27 926 1189.47 926"/>
            <line class="cls-2" x1="1356.37" y1="1192.6" x2="1356.37" y2="1226.8"/>
            <polygon points="1348.27 1221.2 1356.37 1251.6 1364.47 1221.2 1348.27 1221.2"/>
            <line class="cls-2" x1="1221.37" y1="1752.6" x2="1221.37" y2="1786.8"/>
            <polygon points="1213.27 1781.2 1221.37 1811.6 1229.47 1781.2 1213.27 1781.2"/>
            <line class="cls-2" x1="1219.37" y1="2037.6" x2="1219.37" y2="2071.8"/>
            <polygon points="1211.27 2066.2 1219.37 2096.6 1227.47 2066.2 1211.27 2066.2"/>
            <line class="cls-2" x1="1220.37" y1="1481.6" x2="1220.37" y2="1515.8"/>
            <polygon points="1212.27 1510.2 1220.37 1540.6 1228.47 1510.2 1212.27 1510.2"/>
            <line class="cls-2" x1="365.37" y1="1471.6" x2="365.37" y2="1505.8"/>
            <polygon points="357.27 1500.2 365.37 1530.6 373.47 1500.2 357.27 1500.2"/>
            <line class="cls-2" x1="362.37" y1="1611.6" x2="362.37" y2="1645.8"/>
            <polygon points="354.27 1640.2 362.37 1670.6 370.47 1640.2 354.27 1640.2"/>
            <line class="cls-2" x1="1185.37" y1="1214.6" x2="1185.37" y2="1248.8"/>
            <polygon points="1177.27 1243.2 1185.37 1273.6 1193.47 1243.2 1177.27 1243.2"/>
            <text class="cls-4" transform="translate(2642.43 590.71)">C</text>
            <text class="cls-4" transform="translate(2633.88 418.58)">C</text>
            <text class="cls-4" transform="translate(2183.11 737.05)">C</text>
            <text class="cls-4" transform="translate(2190.11 256.39)">C</text>
            <text class="cls-4" transform="translate(988.67 390.71)">1</text>
            <text class="cls-4" transform="translate(990.67 550)">4</text>
            <text class="cls-4" transform="translate(1474.56 266.81)">01-3</text>
            <text class="cls-4" transform="translate(1769.03 267.73)">A1-6</text>
            <text class="cls-4" transform="translate(1266.46 419.92)">1</text>
            <text class="cls-4" transform="translate(1474.95 418.96)">01-1</text>
            <text class="cls-4" transform="translate(1265.33 580.32)">2</text>
            <text class="cls-4" transform="translate(1470.73 586.45)">01-2</text>
            <text class="cls-4" transform="translate(1478.26 734.6)">01-4</text>
            <text class="cls-4" transform="translate(1779.26 737.64)">A1-8</text>
            <text class="cls-4" transform="translate(1278.37 933.79)">4</text>
            <text class="cls-4" transform="translate(1473.78 938.83)">01-5</text>
            <text class="cls-4" transform="translate(1769.9 933.83)">A1-9</text>
            <text class="cls-4" transform="translate(2107.61 930.71)">1</text>
            <text class="cls-4" transform="translate(2208.73 929.75)">2</text>
            <text class="cls-4" transform="translate(2636.29 931.79)">A1-10</text>
            <text class="cls-4" transform="translate(2928.88 594.66)">A1-3</text>
            <text class="cls-4" transform="translate(2931.75 427.22)">A1-1</text>
            <text class="cls-4" transform="translate(1094.67 1150.35)">4</text>
            <text class="cls-4" transform="translate(1201.86 1149.22)">1</text>
            <text class="cls-4" transform="translate(1436.35 1225.62)">1</text>
            <text class="cls-4" transform="translate(1614.54 1138.09)">01-12</text>
            <text class="cls-4" transform="translate(2148.37 1136.75)">A1-13</text>
            <text class="cls-4" transform="translate(2350.33 1136.81)">A1-12</text>
            <text class="cls-4" transform="translate(2915.54 1140.75)">A1-
                <tspan class="cls-5" x="56.02" y="0">1</tspan>
                <tspan x="73.37" y="0">1</tspan>
            </text>
            <text class="cls-4" transform="translate(1302.5 1518.71)">4</text>
            <text class="cls-4" transform="translate(1760.69 1520.83)">A1-15</text>
            <text class="cls-4" transform="translate(1455.82 1526.22)">01-15</text>
            <text class="cls-4" transform="translate(2118.01 1507.71)">1</text>
            <text class="cls-4" transform="translate(2235.84 1510.71)">2</text>
            <text class="cls-4" transform="translate(2628.56 1516.9)">A1-16</text>
            <text class="cls-4" transform="translate(1103.35 1739.66)">4</text>
            <text class="cls-4" transform="translate(1215.18 1739.66)">1</text>
            <text class="cls-4" transform="translate(1096.29 2017.41)">4</text>
            <text class="cls-4" transform="translate(1215.78 2014.35)">1</text>
            <text class="cls-4" transform="translate(1454.37 1807.07)">01-18</text>
            <text class="cls-4" transform="translate(1773.16 1804)">A1-17</text>
            <text class="cls-4" transform="translate(2615.78 1804)">A1-18</text>
            <text class="cls-4" transform="translate(1448.84 2081.75)">02-16</text>
            <text class="cls-4" transform="translate(1770.69 2078.68)">A4-15</text>
            <text class="cls-4" transform="translate(2115.01 2074.09)">C</text>
            <text class="cls-4" transform="translate(2119.01 1799.41)">C</text>
            <text class="cls-4" transform="translate(2606.78 2075.62)">A4-16</text>
            <text class="cls-4" transform="translate(1452.9 1381.75)">01-13</text>
            <text class="cls-4" transform="translate(1766.41 1366.88)">A1-14</text>
            <text class="cls-4" transform="translate(2117.48 1366.34)">C</text>
            <text class="cls-4" transform="translate(2719.56 1221.28)">C</text>
            <use width="40.97" height="44.68" transform="translate(1797.97 345.3)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(1795.97 509.3)" xlink:href="#_1"/>
            <text class="cls-4" transform="translate(118.56 1518.43)">KZ-CS</text>
            <text class="cls-4" transform="translate(641.05 1514.3)">KZ24</text>
            <text class="cls-4" transform="translate(1776.13 424.08)">A1-5</text>
            <text class="cls-4" transform="translate(1775.13 586.08)">A1-7</text>
            <text class="cls-4" transform="translate(2415.13 588.08)">A1-4</text>
            <text class="cls-4" transform="translate(2410.13 418.08)">A1-2</text>
            <polyline id="_路径_4" data-name="&lt;路径&gt;" class="cls-2"
                      points="2205.37 212.6 2387.37 212.6 2387.37 354.6"/>
            <polyline id="_0421" data-name="0421" class="cls-2" points="2203.37 680.6 2389.37 680.6 2387.27 541.4"/>
            <rect class="cls-7" x="1415.87" y="1841.1" width="308" height="77"/>
            <line class="cls-7" x1="1578.87" y1="1917.6" x2="1578.87" y2="1842.6"/>
            <text class="cls-8" transform="translate(1459.92 1895.88)">LS2</text>
            <text class="cls-8" transform="translate(1603.78 1897.91)">Z1-3</text>
            <rect class="cls-7" x="1416.97" y="2.5" width="308" height="77"/>
            <line class="cls-7" x1="1577.97" y1="79" x2="1577.97" y2="4"/>
            <text class="cls-8" transform="translate(1467.3 59.19)">LS1</text>
            <text class="cls-8" transform="translate(1606.3 57.19)">Z1-4</text>
            <text class="cls-4" transform="translate(478.25 1507.04)">3</text>
            <text class="cls-4" transform="translate(473.25 1652.04)">4</text>
            <use width="40.97" height="44.68" transform="translate(609.33 788.02)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(602.33 583.02)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(191.33 581.02)" xlink:href="#_1"/>
            <use width="40.97" height="44.68" transform="translate(195.33 786.02)" xlink:href="#_1"/>
            <ellipse class="cls-2" cx="424.77" cy="603.4" rx="31.1" ry="30.5"/>
            <ellipse class="cls-2" cx="427.77" cy="809.4" rx="31.1" ry="30.5"/>
            <line class="cls-2" x1="203.87" y1="603.4" x2="13.77" y2="603.4"/>
            <line id="_0517" data-name="0517" class="cls-2" x1="394.07" y1="603.4" x2="219.37" y2="603.4"/>
            <line class="cls-2" x1="636.47" y1="603.4" x2="786.67" y2="603.4"/>
            <line id="_0515" data-name="0515" class="cls-2" x1="455.97" y1="603.4" x2="615.77" y2="603.4"/>
            <line class="cls-2" x1="205.37" y1="809.4" x2="12.37" y2="809.4"/>
            <line id="_0516" data-name="0516" class="cls-2" x1="396.67" y1="809.4" x2="221.97" y2="809.4"/>
            <line class="cls-2" x1="643.17" y1="809.4" x2="789.37" y2="809.4"/>
            <line id="_0512" data-name="0512" class="cls-2" x1="458.57" y1="809.4" x2="618.37" y2="809.4"/>
            <text class="cls-4" transform="translate(394.46 755.76)">HADJ</text>
            <text class="cls-4" transform="translate(387.46 548.76)">LUDJ</text>
            <text class="cls-4" transform="translate(189.64 886.06)">05-2</text>
            <text class="cls-4" transform="translate(588.64 665.06)">04-1</text>
            <text class="cls-4" transform="translate(178.64 662.06)">05-1</text>
            <text class="cls-4" transform="translate(598.64 881.06)">04-2</text>
            <text class="cls-4" transform="translate(348.02 658.06)">5</text>
            <text class="cls-4" transform="translate(354.02 886.06)">5</text>
            <text class="cls-4" transform="translate(484.02 885.06)">6</text>
            <text class="cls-4" transform="translate(482.02 656.06)">6</text>
            <text class="cls-9" transform="translate(325.96 59.95)">信号机</text>
            <rect class="cls-7" x="312.72" y="3.42" width="186" height="77"/>
            <polyline class="cls-7" points="807.37 6.6 807.37 1209.6 6.37 1209.6"/>
            <line class="cls-7" x1="2.37" y1="1838.1" x2="1728.37" y2="1838.1"/>
            <line class="cls-7" x1="1724.87" y1="6.66" x2="1724.87" y2="2166.66"/>
            <text class="cls-10" transform="translate(1873.2 101.88)">培训中心模拟控制盘</text>
            <path class="cls-7" d="M131.51,148.53H3365.89V2303.94H133.55S130,148.53,131.51,148.53Z"
                  transform="translate(-128.63 -145.4)"/>
            <line class="cls-1" x1="2070.2" y1="711.17" x2="2097.78" y2="711.17"/>
            <polyline class="cls-1"
                      points="2088.29 742.23 2079.39 734.6 2088.06 729.56 2079.17 722.9 2088.34 716.88 2079.99 711.19"/>
            <line class="cls-1" x1="2087.82" y1="234.48" x2="2115.39" y2="234.48"/>
            <polyline class="cls-1"
                      points="2105.91 265.54 2097 257.9 2105.67 252.87 2096.79 246.21 2105.95 240.19 2097.6 234.5"/>
            <line class="cls-1" x1="2737.88" y1="393.76" x2="2765.45" y2="393.76"/>
            <polyline class="cls-1"
                      points="2755.97 424.82 2747.06 417.19 2755.73 412.15 2746.85 405.49 2756.01 399.48 2747.66 393.78"/>
            <line class="cls-1" x1="2751.36" y1="567.4" x2="2778.93" y2="567.4"/>
            <polyline class="cls-1"
                      points="2769.45 598.46 2760.54 590.83 2769.22 585.79 2760.33 579.13 2769.5 573.12 2761.14 567.42"/>
            <line class="cls-1" x1="2605.61" y1="1199.59" x2="2633.18" y2="1199.59"/>
            <polyline class="cls-1"
                      points="2623.69 1230.65 2614.79 1223.01 2623.46 1217.98 2614.57 1211.32 2623.74 1205.3 2615.39 1199.61"/>
            <line class="cls-1" x1="2221.09" y1="1778.65" x2="2248.67" y2="1778.65"/>
            <polyline class="cls-1"
                      points="2239.18 1809.71 2230.28 1802.08 2238.95 1797.04 2230.06 1790.38 2239.23 1784.37 2230.88 1778.67"/>
            <line class="cls-1" x1="2220.09" y1="2055.89" x2="2247.66" y2="2055.89"/>
            <polyline class="cls-1"
                      points="2238.18 2086.95 2229.27 2079.31 2237.95 2074.28 2229.06 2067.62 2238.23 2061.6 2229.87 2055.91"/>
            <line class="cls-1" x1="2015.82" y1="1342.06" x2="2043.39" y2="1342.06"/>
            <polyline class="cls-1"
                      points="2033.91 1373.11 2025 1365.48 2033.67 1360.45 2024.79 1353.79 2033.95 1347.77 2025.6 1342.08"/>
            <rect class="cls-7" x="499.11" y="3.57" width="308" height="77"/>
            <line class="cls-7" x1="660.11" y1="80.07" x2="660.11" y2="5.07"/>
            <text class="cls-8" transform="translate(549.44 60.26)">LS2</text>
            <text class="cls-8" transform="translate(688.44 58.26)">Z1-3</text>
            <g id="HADJ_x5F_light">
                <ellipse class="st1" cx="424.8" cy="603.4" rx="31.1" ry="30.5"/>
                <polygon class="st46" points="412.5,588.7 438,604 412.5,618 	"/>
                <line class="st46" x1="437.7" y1="593.1" x2="438.7" y2="614.2"/>
                <line class="st47" x1="395.1" y1="603.3" x2="455.9" y2="603.4"/>
            </g>
            <g id="LUDJ_x5F_light_1_">
                <ellipse class="st1" cx="425.4" cy="809.5" rx="31.1" ry="30.5"/>
                <polygon class="st46" points="413.2,794.8 438.7,810.1 413.2,824 	"/>
                <line class="st46" x1="438.3" y1="799.2" x2="439.4" y2="820.3"/>
                <line class="st47" x1="395.8" y1="809.4" x2="456.5" y2="809.5"/>
            </g>
        </svg>
        <popUpBox
            :visible="lineDescriptionBox.visible"
            :x="lineDescriptionBox.x"
            :y="lineDescriptionBox.y"
            :text="lineDescriptionBox.text"
        >
            <div>{{ lineDescriptionBox.text }}</div>
            <div>{{ lineDescriptionBox.id }}</div>
        </popUpBox>
    </div>
</template>

<script setup>
import {
    computed,
    getCurrentInstance,
    onBeforeUnmount,
    onMounted,
    onUnmounted,
    reactive,
    ref,
    watch,
    watchEffect
} from 'vue'
import {useZoom} from "../hooks/useZoom";
import bus from "vue3-eventbus";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {AddAnExam, GetFaultPointDescr} from "../api/ajax";
import {debounce,throttle} from 'lodash';
import popUpBox from "./custombutton/popUpBox.vue";
import { ElMessage } from 'element-plus'
const router = useRouter();
const store = useStore();
let ws = getCurrentInstance().proxy.$ws;

let refs = null;
let operateArray = ref([]);
let currentLine = null;

let readFlag = true;

components:{popUpBox};

let init = computed({
    get(){
        return store.state.global.faultPointJArr
    },
    set(){
    }
})

watch(init,(n,o)=>{
    try {
        if(router.currentRoute.value.name !== "operatetask" && readFlag) {

            let props = Object.keys(n);

            props.forEach((prop, index) => {
                //{0102:false,0103:true....}
                Object.keys(n[prop]).forEach((id) => {
                    if (n[prop][id]) {
                        id = id.replace("_0", "_");
                        let item = document.getElementById(id)

                        if (item) {
                            item.style.stroke = '#ea1414'
                        }
                    } else {
                        id = id.replace("_0", "_");
                        let item = document.getElementById(id)
                        if (item) {
                            item.style.stroke = '#86f7b9'
                        }
                    }
                })
            });
        }
    }catch (e){
        console.log(e)
    }
},{deep:true})


// function handleChick(e) {
//     //练习模式
//
//     if(router.currentRoute.value.name==="operate"){
//         let ele = e.target;
//         let nodeName = ele.nodeName;
//         if (nodeName === "line" || nodeName === "polyline") {
//             let id = ele.getAttribute('id');
//             if (id) {
//                 if (ele.style.stroke !== 'rgb(234, 20, 20)') {
//                     //练习模式不需要存数据到数据库
//                     ele.style.stroke = '#ea1414'
//                     operateArray.value.push(ele)
//                     id = id.replace('_', '0')
//                     let message = {order: "SetAFaultPoint", data: id}
//                     ws.send(JSON.stringify(message));
//                 } else {
//                     //练习模式不需要存数据到数据库
//                     ele.style.stroke = '#86f7b9'
//                     operateArray.value.splice(operateArray.value.indexOf(ele),1);
//                     id = id.replace('_', '0')
//                     let message = {order: "ResetAFaultPoint", data: id}
//                     ws.send(JSON.stringify(message));
//                 }
//             } else {
//                 alert('该点位目前无法设置故障')
//             }
//         }
//     }else if(router.currentRoute.value.name==="operatetest"){
//         let ele = e.target;
//         let nodeName = ele.nodeName;
//         if (nodeName === "line" || nodeName === "polyline") {
//             let id = ele.getAttribute('id')
//             if (id) {
//                 if (ele.style.stroke !== 'rgb(234, 20, 20)') {
//                     //练习模式不需要存数据到数据库
//                     ele.style.stroke = '#ea1414'
//                     operateArray.value.push(ele)
//                     id = id.replace('_', '0')
//                     store.commit('test/increment',id)
//                 } else {
//                     //练习模式不需要存数据到数据库
//                     ele.style.stroke = '#86f7b9'
//                     operateArray.value.splice(operateArray.value.indexOf(ele),1);
//                     id = id.replace('_', '0')
//                     store.commit('test/subtract',id)
//                 }
//             } else {
//                 alert('该点位目前无法设置故障')
//             }
//         }
//     }else if(router.currentRoute.value.name==="operatetask"){
//         //考试模式
//         let ele = e.target;
//         let nodeName = ele.nodeName;
//         if (nodeName === "line" || nodeName === "polyline") {
//             let id = ele.getAttribute('id');
//             if (id) {
//                 if (ele.style.stroke !== 'rgb(212, 0, 255)') {
//                     //练习模式不需要存数据到数据库
//                     ele.style.stroke = '#D400FF'
//                     operateArray.value.push(ele)
//                     id = id.replace('_', '0')
//                     store.commit('task/increment',id)
//                 } else {
//                     //练习模式不需要存数据到数据库
//                     ele.style.stroke = '#86f7b9'
//                     operateArray.value.splice(operateArray.value.indexOf(ele),1);
//                     id = id.replace('_', '0')
//                     store.commit('task/subtract',id)
//                 }
//             } else {
//                 alert('该点位目前无法设置故障')
//             }
//         }
//     }
// }
let readFlagTimer = null;
// throttle((e)=>{});
function handleChick(e){
    let ele = e.target;
    let nodeName = ele.nodeName;
    //当前线的颜色值
    let eleColor = getComputedStyle(ele,null).stroke;
    //练习模式
    if(router.currentRoute.value.name==="operate"){
        if (nodeName === "line" || nodeName === "polyline") {
            let id = ele.getAttribute('id');
            if (id) {
                readFlag = false;
                clearTimeout(readFlagTimer);
                readFlagTimer = setTimeout(()=>{
                    readFlag = true;
                },2000);
                if (eleColor === 'rgb(134, 247, 185)') {
                    //练习模式不需要存数据到数据库
                    ele.style.stroke = '#ea1414'
                    //骚操作
                    // ele.style.stroke = '#ea1413'
                    // ele.style.stroke = '#eaff00'
                    operateArray.value.push(ele)
                    id = id.replace('_0', '0')
                    let message = {order: "SetAFaultPoint", data: id}
                    ws.send(JSON.stringify(message));
                } else if(eleColor === 'rgb(234, 20, 20)'){
                    //练习模式不需要存数据到数据库
                    ele.style.stroke = '#86f7b9'
                    //骚操作
                    // ele.style.stroke = '#86f7b8'
                    // ele.style.stroke = '#0000b8'
                    operateArray.value.splice(operateArray.value.indexOf(ele),1);
                    id = id.replace('_0', '0')
                    let message = {order: "ResetAFaultPoint", data: id}
                    ws.send(JSON.stringify(message));
                }
            } else {
                // alert('该点位目前无法设置故障');
                ElMessage({
                    showClose: true,
                    message: '该点位目前无法设置故障!',
                    type: 'warning',
                });
            }
        }
    }else if(router.currentRoute.value.name==="operatetest"){
        readFlag = false
        if (nodeName === "line" || nodeName === "polyline") {
            let id = ele.getAttribute('id')
            if (id) {
                if (eleColor !== 'rgb(234, 20, 20)') {
                    //练习模式不需要存数据到数据库
                    ele.style.stroke = '#ea1414'
                    operateArray.value.push(ele)
                    id = id.replace('_0', '0')
                    store.commit('test/increment',id)
                } else {
                    //练习模式不需要存数据到数据库
                    ele.style.stroke = '#86f7b9'
                    operateArray.value.splice(operateArray.value.indexOf(ele),1);
                    id = id.replace('_0', '0')
                    store.commit('test/subtract',id)
                }
            } else {
                ElMessage({
                    showClose: true,
                    message: '该点位目前无法设置故障!',
                    type: 'warning',
                });
            }
        }
    }else if(router.currentRoute.value.name==="operatetask"){
        readFlag = false
        //考试模式
        if (nodeName === "line" || nodeName === "polyline") {
            let id = ele.getAttribute('id');
            if (id) {
                if (eleColor !== 'rgb(212, 0, 255)') {
                    //练习模式不需要存数据到数据库
                    ele.style.stroke = '#D400FF'
                    operateArray.value.push(ele)
                    id = id.replace('_0', '0')
                    store.commit('task/increment',id)
                } else {
                    //练习模式不需要存数据到数据库
                    ele.style.stroke = '#86f7b9'
                    operateArray.value.splice(operateArray.value.indexOf(ele),1);
                    id = id.replace('_0', '0')
                    store.commit('task/subtract',id)
                }
            } else {
                ElMessage({
                    showClose: true,
                    message: '该点位目前无法设置故障!',
                    type: 'warning',
                });
            }
        }
    }
}

let lineDescriptionBox = reactive({
    visible :false,
    id:'',
    text :"",
    x:0,
    y:0,
})

let handleMouseover = debounce((e)=>{
    let ele = e.target;
    let nodeName = ele.nodeName;
    if (nodeName === "line" || nodeName === "polyline") {
        let id = ele.getAttribute('id');
        if (id) {
            id = id.replace('_0', '0');
            GetFaultPointDescr({lineID : id}).then((res) => {
                if(res.data.code === 200){
                    lineDescriptionBox.visible = true
                    lineDescriptionBox.x = e.clientX;
                    lineDescriptionBox.y = e.clientY-40;
                    let textValue = res.data.data.replace('_', '到')
                    lineDescriptionBox.text = '点位：' + textValue;
                    // lineDescriptionBox.id = 'ID：' + id
                }else{
                    console.log(res.data);
                }
            },(error)=>{
                console.log(error);
            });
        }
    }else
    {
        lineDescriptionBox.visible = false;
    }
},10);

//重置所有继电器
bus.on('reset', e =>{
    //上位机图片清除所有故障点
    operateArray.value.forEach( item =>{
        item.style.stroke = '#86f7b9'
    })
    //通知下位机恢复所有继电器
    ws.send(JSON.stringify({"order":"ResetAllFaultPoints"}));
    //上位机图片清除所有故障点
    operateArray.value = []
    //store里面也清空
    store.commit('test/reset')
})


let {svgclip,svg,initZoom} = useZoom();
initZoom( 400,0.650);
</script>

<style lang="scss" scoped>
.svgWrapper {
    height: 100%;
    width: 100%;
    overflow: auto;
    cursor: default;
    line:hover, polyline:hover {
        cursor: pointer;
        stroke-width: 15px;
        //opacity: 0.8;
        //border:1px solid red;
        //outline:1px solid red;
    }
}

.cls-1, .cls-2, .cls-7 {
    fill: none;
    stroke-miterlimit: 10;
}

.cls-1, .cls-2 {
    stroke: #86f7b9;
}

.cls-1 {
    stroke-width: 4px;
}

.cls-2, .cls-7 {
    stroke-width: 10px;
}

.cls-10, .cls-3, .cls-4, .cls-8, .cls-9 {
    isolation: isolate;
}

.cls-3 {
    font-size: 24px;
}

.cls-3, .cls-4, .cls-8 {
    font-family: ArialMT,
    Arial;
}

.cls-4 {
    fill: #86f7b9;
    font-size: 36px;
}

.cls-5 {
    letter-spacing: -0.07em;
}

.cls-6 {
    letter-spacing: -0.06em;
}

.cls-7 {
    stroke: #16ef16;
}

.cls-8, .cls-9 {
    fill: #86f7b9;
    font-size: 48px;
}

.cls-10, .cls-9 {
    fill: #86f7b9;
    font-family: AdobeSongStd-Light-GBpc-EUC-H,
    Adobe Song Std;
}

.cls-10 {
    fill: #86f7b9;
    font-size: 60px;
}
polygon{
    fill: #86f7b9;
}
.st1{fill:none;stroke:#86f7b9;stroke-width:5;stroke-miterlimit:10;}
.st46{stroke:#86f7b9;stroke-miterlimit:10;stroke-width:5;}
.st47{fill:none;stroke:#86f7b9;stroke-width:6;stroke-miterlimit:10;}
</style>
